<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分页</title>
	<style>
		ul,li,a{
			margin: 0;padding: 0;border: 0;text-decoration: none;list-style:none;
		}
		.hsl-page{
			display:inline-block;
		}
		.hsl-page li{
			float:left;
		}
		.hsl-page li>a,.hsl-page li>span{
			color:#333;padding: 0 15px;height:35px;line-height:35px;
			background-color:#fff;font-size:15px;
			box-sizing:border-box;display:inline-block;
			border:1px solid #e2e2e2;margin-left: -1px;
		}
		.hsl-page li>a.hsl-disabled{
			color: #d2d2d2;
    	cursor: not-allowed;
		}
		.hsl-page li>a:hover.hsl-disabled{
			color: #d2d2d2;
    	cursor: not-allowed;
    	background-color: #fff;
		}
		.hsl-page li>a:hover{
			color:#009688;
			background-color: #ededed;
    	border-color: #ededed;
		}
		.hsl-page li a.selected{
			background-color:#009688;
			color:#fff;border-color:#009688;
		}
		.hsl-page li:last-child{
			color:#999;padding: 0 15px;height:35px;line-height:35px;
			background-color:#fff;font-size:15px;
			box-sizing:border-box;display:inline-block;
		}
		.hsl-page-input{
			display: inline-block;
	    width: 40px;height: 30px;
	    line-height: 30px;
	    margin: 0 10px;padding: 0 3px;
	    text-align: center;
	    border: 1px solid #e2e2e2;
	    border-radius: 2px;
	    background-color: #fff;
	    box-sizing: border-box;
		}
		.hsl-page-btn{
			margin-left: 10px;padding: 0 10px;cursor: pointer;
			height: 30px;line-height: 30px;
	    border: 1px solid #e2e2e2;border-radius: 2px;
	    background-color: #fff;
	    box-sizing: border-box;
		}
		.hsl-page:after{
			content:"";display:block;clear:both;
		}
	</style>
</head>
<body>
	
	<ul class="hsl-page"></ul>

	<script>

		function pageModal(obj){
			this.pageBox = document.getElementsByClassName(obj.className)[0];
			this.pageNow = obj.pageNow;  //当前页
			this.pageNum = obj.pageNum;  //总页数
			this.pageType = obj.pageType;
			this.groups = 6;
			this.init();
		}

		pageModal.prototype={
			constructor: pageModal,

			init:function(){
				//当总页数小于等于连续出现的页码数时
				if(this.pageNum <= this.groups){
					let pageHtml = "";let allHtml = "";
					let frontHtml = `
              <li><a href="/home/news/listpage?type=${this.pageType}&list=1" id="first">首页</a></li>
							<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow-1}" id="prev">上一页</a></li>
					                `;
					let afterHtml = `
							<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow+1}" id="next">下一页</a></li>
							<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNum}" id="footer">尾页</a></li>
							<li><span>共<strong>${this.pageNum}</strong>页</span></li>
							<li>
								到第
								<input id="pageNum" type="number" min="1" value="1" class="hsl-page-input">
								页
								<button id="pageJump" type="button" class="hsl-page-btn">确定</button>
							</li>
					                `;
					for(let i=1;i<(this.pageNum+1);i++){
						pageHtml += `<li><a href="/home/news/listpage?type=${this.pageType}&list=${i}" class="page-jump">${i}</a></li>`;
					}
					allHtml = frontHtml + pageHtml + afterHtml;
					this.pageBox.innerHTML = "";
					this.pageBox.innerHTML = allHtml;
					this.isSelected();
					this.isDisabled();
				}
				//当总页数大于连续出现的页码数时
				else if(this.pageNum > this.groups){
					let pageHtml = "";let allHtml = "";
					let frontHtml = `
              <li><a href="/home/news/listpage?type=${this.pageType}&list=1" id="first">首页</a></li>
							<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow-1}" id="prev">上一页</a></li>
					                `;
					let afterHtml = `
							<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow+1}" id="next">下一页</a></li>
							<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNum}" id="footer">尾页</a></li>
							<li><span>共<strong>${this.pageNum}</strong>页</span></li>
							<li>
								到第
								<input id="pageNum" type="number" min="1" value="1" class="hsl-page-input">
								页
								<button id="pageJump" type="button" class="hsl-page-btn">确定</button>
							</li>
					                `;
					//如果pageNow为1或2时                
					if(this.pageNow-2 <= 0){
						for(let i=1;i<(6+1);i++){
							pageHtml += `<li><a href="/home/news/listpage?type=${this.pageType}&list=${i}" class="page-jump">${i}</a></li>`;
						}
						allHtml = frontHtml + pageHtml + afterHtml;
						this.pageBox.innerHTML = "";
						this.pageBox.innerHTML = allHtml;
						this.isSelected();
						this.isDisabled();
					}
					//如果pageNow大于等于3
					else if(this.pageNow >= 3){
						//如果pageNow+3 <= pageNum
						if(this.pageNow+3 <= this.pageNum){
							pageHtml = `
								<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow-2}" class="page-jump">${this.pageNow-2}</a></li>
								<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow-1}" class="page-jump">${this.pageNow-1}</a></li>
								<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow}" class="page-jump">${this.pageNow}</a></li>
								<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow+1}" class="page-jump">${this.pageNow+1}</a></li>
								<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow+2}" class="page-jump">${this.pageNow+2}</a></li>
								<li><a href="/home/news/listpage?type=${this.pageType}&list=${this.pageNow+3}" class="page-jump">${this.pageNow+3}</a></li>
							           `;
							allHtml = frontHtml + pageHtml + afterHtml;
							this.pageBox.innerHTML = "";
							this.pageBox.innerHTML = allHtml;
							this.isSelected();
							this.isDisabled();
						}
						//如果pageNow+3 > pageNum
						else if(this.pageNow+3 > this.pageNum){
							for(let i=(this.pageNum-5);i<(this.pageNum+1);i++){
								pageHtml += `<li><a href="/home/news/listpage?type=${this.pageType}&list=${i}" class="page-jump">${i}</a></li>`;
							}
							allHtml = frontHtml + pageHtml + afterHtml;
							this.pageBox.innerHTML = "";
							this.pageBox.innerHTML = allHtml;
							this.isSelected();
							this.isDisabled();
						}
					}
				}
				this.bindEvent(this.pageType,this.pageNum);
			},
			//将当前页码突出显示
			isSelected:function(){
				for(let i = 0; i < document.getElementsByClassName("page-jump").length; i++){
					document.getElementsByClassName("page-jump")[i].classList.remove("selected");
					if( document.getElementsByClassName("page-jump")[i].innerHTML == this.pageNow ){
						document.getElementsByClassName("page-jump")[i].className = "selected";
					}
				}
			},
			//根据当前页来判断是否给“首页，上一页，下一页，尾页”增加禁止样式
			isDisabled:function(){
				if(this.pageNow == 1 && this.pageNum != 1){
					document.getElementById("first").className = "hsl-disabled";
					document.getElementById("prev").className = "hsl-disabled";
					document.getElementById("next").classList.remove("hsl-disabled");
					document.getElementById("footer").classList.remove("hsl-disabled");
				}
				else if(this.pageNow == this.pageNum && this.pageNum != 1){
					document.getElementById("first").classList.remove("hsl-disabled");
					document.getElementById("prev").classList.remove("hsl-disabled");
					document.getElementById("next").className = "hsl-disabled";
					document.getElementById("footer").className = "hsl-disabled";
				}
				else if(this.pageNow == this.pageNum == 1){
					document.getElementById("first").className = "hsl-disabled";
					document.getElementById("prev").className = "hsl-disabled";
					document.getElementById("next").className = "hsl-disabled";
					document.getElementById("footer").className = "hsl-disabled";
				}
				else{
					document.getElementById("first").classList.remove("hsl-disabled");
					document.getElementById("prev").classList.remove("hsl-disabled");
					document.getElementById("next").classList.remove("hsl-disabled");
					document.getElementById("footer").classList.remove("hsl-disabled");
				}
			},

			bindEvent:function(type,pageNum,pageNow){ //绑定事件		
				for(let i = 0; i < document.getElementsByClassName("hsl-disabled").length; i++){
					document.getElementsByClassName("hsl-disabled")[i].setAttribute("href","javascript:;");
				}
				document.getElementById("pageJump").addEventListener("click",function(){
					let num = document.getElementById("pageNum").value;
					if(num > pageNum){
						alert("请输入正确的页码！");
						pageNow = pageNum;
						document.getElementById("pageNum").value = pageNum;
					}else{
						this.pageNow = num;
						window.location.href=("/home/news/listpage?type="+type+"&list="+this.pageNow);
					}
				});
			}
		}

	/************************************************/
		var page = new pageModal({
			className: "hsl-page",
			pageNow: 1,  //当前页
			pageNum: 3,  //总页数
			pageType: 7  //页面类型
		})
	</script>
</body>
</html>